<div class="student-list-container">
    <div class="filter-container">
        <mat-form-field>
            <mat-label>按班级筛选</mat-label>
            <input matInput [(ngModel)]="classFilter" placeholder="请输入班级名称" type="text">
        </mat-form-field>
        <button mat-flat-button color="primary" (click)="openDialog()">
            <mat-icon>add</mat-icon>
            新增学生
        </button>
    </div>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="student_id">
            <th mat-header-cell *matHeaderCellDef>学号</th>
            <td mat-cell *matCellDef="let element">{{element.student_id}}</td>
        </ng-container>
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>姓名</th>
            <td mat-cell *matCellDef="let element">{{element.name}}</td>
        </ng-container>
        <ng-container matColumnDef="age">
            <th mat-header-cell *matHeaderCellDef>年龄</th>
            <td mat-cell *matCellDef="let element">{{element.age}}</td>
        </ng-container>
        <ng-container matColumnDef="class">
            <th mat-header-cell *matHeaderCellDef>班级</th>
            <td mat-cell *matCellDef="let element">{{element.class}}</td>
        </ng-container>
        <ng-container matColumnDef="gender">
            <th mat-header-cell *matHeaderCellDef>性别</th>
            <td mat-cell *matCellDef="let element">{{element.gender}}</td>
        </ng-container>
        <ng-container matColumnDef="phone">
            <th mat-header-cell *matHeaderCellDef>联系方式</th>
            <td mat-cell *matCellDef="let element">{{element.phone}}</td>
        </ng-container>
        <ng-container matColumnDef="email">
            <th mat-header-cell *matHeaderCellDef>邮箱</th>
            <td mat-cell *matCellDef="let element">{{element.email}}</td>
        </ng-container>
        <ng-container matColumnDef="address">
            <th mat-header-cell *matHeaderCellDef>地址</th>
            <td mat-cell *matCellDef="let element">{{element.address}}</td>
        </ng-container>
        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let element">
                <button mat-icon-button color="primary">
                    <mat-icon>edit</mat-icon>
                </button>
                <button mat-icon-button color="warn">
                    <mat-icon>delete</mat-icon>
                </button>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="stuColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: stuColumns;"></tr>
    </table>
</div>